<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<style type="text/css">
			.bg-color {
				background-color: #3B559F;
				box-shadow: none;
				padding-left: 0!important;
				padding-right: 0!important;
			}
			
			.mui-pull-left{
				position: absolute;
				color: #FFFFFF;
				bottom: 10px;
				margin-left: 3%;
				font-size: 110%;
			}
			
			.mui-pull-right{
				position: absolute!important;
				color: #FFFFFF;
				bottom: -5px!important;
				font-size: 34px!important;
				right: 2%;
			}
			
			.fiends-new-div {
				width: 100%;
				background-color: #FFFFFF;
				border-bottom: 1px solid #F7F7F7;
				display: flex;
				align-items: center;
				padding: 2% 0;
			}
			
			.fiends-div {
				width: 100%;
				background-color: #FFFFFF;
				border-bottom: 1px solid #F7F7F7;
				display: flex;
				align-items: center;

			}
			
			.friend-heddimg {
				width: 10%;
				margin-right: 5%;
				margin-left: 3%
			}
			
			.png-div {
				width: 10%;
				margin-right: 5%;
				margin-left: 3%;
				background-color: #3B559F;
			}
			
			.png-div img {
				margin: 25%;
				width: 50%;
			}
			
			#frid-div {
				margin-top: 5%;
			}
			
			.card-div {
				display: none;
			}
			
			.mui-plus .plus{
				display: inline;
			}
			
			.plus{
				display: none;
			}
			
			#topPopover {
				position: fixed;
				top: 16px;
				right: 6px;
			}
			#topPopover .mui-popover-arrow {
				left: auto;
				right: 6px;
			}
			p {
				text-indent: 22px;
			}
			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}
			.mui-popover {
				height: 140px;
				width: 110px!important;
				margin-top: -10px;
			}
		</style>
	</head>

	<body>

		<!--头部导航栏-->
		<header class="mui-bar bg-color mui-bar-nav " id="header">
			<a class="mui-pull-left">论语</a>
			<a id="menu" class="mui-icon mui-icon-plusempty mui-pull-right" href="#topPopover"></a>
		</header>

		<div class="mui-content" id="mui-content">
			<div id="mingx-div">
				<div id="fiends-new-div1" class="fiends-new-div bgtoggle">
					<div class="png-div"><img src="../images/newfriend.png" /></div>
					<text>新的朋友</text>
				</div>

				<div id="fiends-new-div2" class="fiends-new-div bgtoggle">
					<div class="png-div"><img src="../images/minegz.png" /></div>
					<text>我的关注</text>
				</div>
			</div>

			<div id="frid-div" class="frid-div">
				<!--加载列表处-->
			</div>
		</div>
		
		<div id="topPopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell" id="saoyisao-png"><a href="#">扫一扫</a></li>
						<li class="mui-table-view-cell" id="search-png"><a href="#">搜索好友</a></li>
						<li class="mui-table-view-cell" id="add-png"><a href="#">添加好友</a></li>						
					</ul>
				</div>
			</div>
		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/immersed.js"></script>
		<script src="../js/arttmpl.js"></script>
		<script type="text/javascript">
			mui.init();

			var content = '';
			document.getElementById('add-png').addEventListener('tap', function() {
				mui('#topPopover').popover('hide');
				mui.openWindow({
					url: 'goodfriend/addfriend.html',
					id: 'goodfriend/addfriend.html'
				})
			})

			document.getElementById('search-png').addEventListener('tap', function() {
				mui('#topPopover').popover('hide');
				mui.openWindow({
					url: 'goodfriend/searchfriend.html',
					id: 'goodfriend/searchfriend.html',
					extras: {
						cont: content
					}
				})
			})
			
			
			document.getElementById('saoyisao-png').addEventListener('tap', function() {
				mui('#topPopover').popover('hide');
				mui.openWindow("scanme.html","scanme.html");
			})
			
			
			document.getElementById('fiends-new-div1').addEventListener('tap', function() {
				mui.openWindow({
					url: 'goodfriend/newfriends.html',
					id: 'goodfriend/newfriends.html'
				})
			})
			document.getElementById('fiends-new-div2').addEventListener('tap', function() {
				mui.openWindow({
					url: 'goodfriend/mineguanzhu.html',
					id: 'goodfriend/mineguanzhu.html'
				})
			})

			var showall = function() {
				mui.ajax({
					url: 'https://www.lunyuwang.com/friendListController/loadFriendList',
					data: {
						lyuser_Card: plus.storage.getItem("card")
					},
					async: true, //将false改为true
					crossDomain: true, //强制使用5+跨域
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					//processData: false,
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: function(data) {
						content = data.userList;
						var record = data.userList;
						if(record == '0') {
							return;
						}
						var viewwidth = document.body.clientWidth;
						var headimg = document.getElementsByClassName('fiends-div');
						var str = template('list-friend', {
							"record": record
						});
						document.getElementById('frid-div').innerHTML = str;
						for(var i = 0; i < headimg.length; i++) {
							headimg[i].style.padding = "-webkit-calc(" + viewwidth * 0.02 + "px) 0"
							headimg[i].getElementsByTagName('img')[0].style.height = "-webkit-calc(" + viewwidth * 0.1 + "px)";
						}
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；
						mui.alert("失败了!")
					}
				})
			}

			mui.plusReady(function() {
				starbar();
				showall();
				var viewwidth = document.body.clientWidth;
				var pngdiv = document.getElementsByClassName('png-div');
				var headimg = document.getElementsByClassName('fiends-div');
				var paggdiv = document.getElementsByClassName('fiends-new-div');
				for(var i = 0; i < 2; i++) {
					paggdiv[i].style.cssText = "padding: -webkit-calc(" + viewwidth * 0.02 + "px) 0;"
					pngdiv[i].style.cssText = "height: -webkit-calc(" + viewwidth * 0.1 + "px);";
				}

				mui('#mui-content').on('tap', '.fiends-div', function() {
					//mui.alert(this.getElementsByTagName('text')[0].textContent)
					var card = this.getElementsByTagName('text')[0].textContent;
					mui.openWindow({
						url: 'goodfriend/friendhtml.html',
						id: 'goodfriend/friendhtml.html',
						extras: {
							card: card,
							flag: '1'
						}
					})
				})
				

				mui(document).on('touchstart', '.bgtoggle', function() {
					this.style.backgroundColor = '#F7F7F7'
				}, false);
				mui(document).on('touchend', '.bgtoggle', function() {
					this.style.backgroundColor = '#FFFFFF';
				}, false);

			})

			window.addEventListener('delgoodfriend', function(event) {
				showall();
			})
			
			window.addEventListener('popoverhide', function(event) {
				mui('#topPopover').popover('hide');
			})

			//按两次返回键退出应用
			var first = null;
			mui.back = function() {
				mui.plusReady(function() {
					//首页返回键处理
					//处理逻辑：1秒内，连续两次按返回键，则退出应用；
					if(!first) {
						first = new Date().getTime();
						mui.toast('再按一次退出应用');
						setTimeout(function() {
							first = null;
						}, 1000);
					} else {
						if(new Date().getTime() - first < 1000) {
							plus.runtime.quit();
						}
					}
				});
			}
		</script>

		<!--列表渲染模板-->
		<script type="text/template" id="list-friend">
			<% for(var i in record){ var item=record[i]; %>
			<div id="fiends-div<%=(i+1)%>" class="fiends-div bgtoggle">
				<text class="card-div"><%=item.lyuser_Card%></text>
				<text class="card-div"><%=item.lyuser_Id%></text>
				<img src="<%=item.lyuser_FacePath%>" class="friend-heddimg" />
				<text><%=item.lyuser_NickName%></text>
			</div>
			<% } %>
		</script>
	</body>

</html>